<template>
  <van-sticky>
    <Header title="通知公告"></Header>
  </van-sticky>

  <van-cell-group inset  v-for="(item,index) in noticeList" :key="index" style="margin: 3% 2% 3% 2%; border-radius: 20px;" >
    <van-cell>
      <router-link :to="{ path: '/ggxq', query: { id: item.id }}">
        <div class="top">
          <van-button color="#f2f2f3" style=" " round>
            <p style="color: #2b95ef; font-size: 3vw;width: 20vw; padding: 0;">学校通告</p>
          </van-button>
          <p class="ellipsis">{{item.title}}</p>
        </div>
        <div class="bottom">
          <p style=" font-size: 13px;">创建单位: {{item.sender}}</p>
          <p style=" font-size: 13px;">创建时间: {{item.collegeID}}</p>
        </div>
      </router-link>
    </van-cell>
  </van-cell-group>

</template>

<script>
import {onMounted, ref} from "vue";
import {getNotify} from '/@/api/getNotify';
export default {
  setup(){
    const noticeList = ref([])

    const initData = async () =>{
      const res = await getNotify();
      noticeList.value = res.response.value.extend.notices.map((item) => {
            return {
              "collegeID": item.collegeID,
              "content": item.content,
              "id": item.id,
              "person": item.person,
              "sender": item.sender,
              "state": item.state,
              "title": item.title
            }
          }
      )
    }

    onMounted(()=>{
      initData();
    })

    return{
      noticeList,
    }
  }
}
</script>

<style scoped lang="less">
.ellipsis{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  max-height: 3.6em;
  color: #141414;
  font-size: 33px;
}
.top{
  display: flex;
}

.van-button{
  color: #2b95ef;
  margin-right: 5vw;
  width: 5rem;
  height: 2.5rem;

}

.bottom{
  padding-top: 30px;
  color: #868687;
}
.info{
  display: flex;
}

</style>
